import styled from 'styled-components'
import Icon from '@/components/Icon'
export const StyledWrap = styled.div`
	height: calc(100vh - 270px);
	min-height: 450px;
	overflow-x: auto;
	border-bottom: 2px solid #949799;
	font-size: 12px;
	color: #4e4e4e;
	.line-wrap {
		position: relative;
		display: flex;
		margin-bottom: 20px;
		min-height: 30px;
		.label {
			width: 105px;
		}

		.first-radio-item {
			margin-bottom: 20px;
		}
		.row-radio {
			position: relative;
			top: -4px;
		}
		&.type-line {
			.type-text {
				line-height: 22px;
			}
		}
		&.source-media-line {
			.tip {
				color: #949799;
				margin-left: 25px;
				&.last {
					margin-left: 37px;
				}
			}
		}
		&.cascade-line {
			.other-options {
				position: absolute;
				bottom: -3px;
				left: 250px;
				display: flex;
				align-items: center;
				height: 23px;
				.text {
					padding: 3px;
					&.disabled {
						color: #949799;
					}
				}
				.cascade-input {
					.kd-input-error-msg,
					.kd-input-msg {
						white-space: nowrap;
					}
				}
				.multi-checkbox {
					margin-left: 50px;
				}
			}
		}
		&.mute-exc-line,
		&.source-used-line {
			.tip {
				position: relative;
				top: 2px;
				color: #949799;
				margin-left: 30px;
			}
		}
		&.auto-vmp-line {
			.n-mode {
				display: flex;
				margin-left: 25px;
				.text {
					display: inline-block;
					width: 64px;
				}
			}
		}
		&.video-line {
			.other-options {
				position: relative;
				top: 3px;
				margin-left: 30px;
			}
		}
		&.live-line {
			.no-login {
				position: relative;
				top: -5px;
				margin-left: 30px;
			}
		}
		&.allow-anonymous-line {
			.allow-checkbox {
				position: relative;
				top: -7px;
			}
		}
		&.encryption-line {
			margin-bottom: 32px;
			.certificate-options {
				position: absolute;
				left: 105px;
				top: 28px;
			}
		}
		.voice-inspire-time {
			margin-left: 16px;
		}
		.auto-call-options {
			position: absolute;
			display: flex;
			align-items: center;
			top: -4px;
			left: 228px;
			.call-input {
				margin-right: 10px;
				margin-left: 7px;
				.kd-input-error-msg,
				.kd-input-msg {
					white-space: nowrap;
				}
			}
		}
		&.media-ability-line {
			.h265-check {
				display: flex;
				align-items: center;
				margin-bottom: 20px;
			}
			.media-select {
				display: flex;
				align-items: center;
				.self-input {
					margin: 0 10px 0 20px;
					.kd-input-msg,
					.kd-input-error-msg {
						white-space: nowrap;
					}
				}
				.self-select {
					margin-left: 20px;
				}
			}
			.sfu-media {
				display: flex;
				align-items: center;
				position: relative;
				top: -3px;
				& > span {
					margin-right: 20px;
				}
			}
		}
		&.live-password-line {
			.kd-input-error-msg {
				white-space: nowrap;
			}
		}
	}
	.pop_icon {
		position: relative;
		top: 3px;
		margin-left: 8px;
	}
`
export const StyledPopWrap = styled.div`
	padding: 14px 16px;
	width: 358px;
	border: 1px solid #b3bbc3;
	background-color: #fff;
	color: #4e4e4e;
	font-size: 12px;
	line-height: 22px;
	border-radius: 6px;
	.pop-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #e9eaeb;
		padding-bottom: 14px;
	}
	.pop-content {
		padding-top: 14px;
	}
	.pop-paragraph {
		margin-bottom: 14px;
	}
`

export const CancelIcon = styled(Icon)`
	height: 15px;
	width: 15px;
	background-position: -3px -230px;
`

export const PopIcon = styled(Icon)`
	height: 15px;
	width: 15px;
	background-position: -75px -177px;
	&:hover,
	&.active {
		background-position: -90px -177px;
	}
`
